<template>
  <div class="home">
    <el-row class="rowTow">
      <el-col :span="12">{{ title }}，欢迎来到同庆楼成本管理系统平台！</el-col>
    </el-row>
    <el-row class="rowOne">
      <el-col :span="6">
        <div class="colOne">
          <el-row>
            <el-col :span="12">
              <img class="image" src="@/assets/images/Group 3137.png" alt="" />
            </el-col>
            <el-col class="col_1" :span="12">
              <el-row class="row_3">
                <el-col :span="24">成本:</el-col>
                <el-col :span="24">同比上期</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="colOne">
          <el-row>
            <el-col :span="12">
              <img class="image" src="@/assets/images/Group 3138.png" alt="" />
            </el-col>
            <el-col class="col_1" :span="12">
              <el-row class="row_3">
                <el-col :span="24">毛利:</el-col>
                <el-col :span="24">同比上期</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="colOne">
          <el-row>
            <el-col :span="12">
              <img class="image" src="@/assets/images/Group 3139.png" alt="" />
            </el-col>
            <el-col class="col_1" :span="12">
              <el-row class="row_3">
                <el-col :span="24">毛利率:</el-col>
                <el-col :span="24">同比上期</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="colOne">
          <el-row>
            <el-col :span="12">
              <img class="image" src="@/assets/images/Group 3140.png" alt="" />
            </el-col>
            <el-col class="col_1" :span="12">
              <el-row class="row_3">
                <el-col :span="24">损益:</el-col>
                <el-col :span="24">同比上期:</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row> </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      title: "上午好",
      timer: null,
    };
  },
  created() {
    let day = new Date();
    this.timer = setInterval(this.checkTimeOfDay, 1000);
    // 上午：09:0012:00；中午：12:0014:00；下午：14:0017:00（或18:00）
  },
  methods: {
    checkTimeOfDay() {
      let now = new Date();
      let hours = now.getHours();

      if (hours >= 0 && hours < 12) {
        // console.log("当前时间属于上午");
        this.title = "上午";
      } else if (hours >= 12 && hours < 18) {
        // console.log("当前时间属于下午");
        this.title = "下午";
      } else {
        // console.log("当前时间属于晚上");
        this.title = "晚上";
      }
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
  activated() {
    this.timer = setInterval(this.checkTimeOfDay, 1000);
  },
  deactivated() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #f0f2f5;
  padding-top: 10px;
  ::after {
    display: block;
    height: 1px;
    width: 100%;
  }
  ::before {
    display: block;
    width: 100%;
    height: 1px;
  }
  .rowTow {
    margin: 15px;
    background-color: #fff;
    height: 70px;
    line-height: 70px;
    border-radius: 10px;
    padding-left: 40px;
  }
  .rowOne {
    margin-top: 15px;

    width: 100%;
    height: 210px;
    .colOne {
      background-color: #fff;
      margin: 14px;
      padding: 40px;
      border-radius: 10px;
      .col_1 {
        // height: 50%;
        height: 88px;
        .row_3 {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
    .image {
      // height: 100%;
      // width: 100%;
      width: 82px;
      height: 82px;
      margin: auto;
    }
  }
}
</style>
